<template>
	<view class="color333 mine">
		<uni-mdnav :title="`每日任务`"></uni-mdnav>
		<view class="bgBox">
			<view class="bg">
				<image src="https://aihelp.oss-cn-hangzhou.aliyuncs.com/kwkd/resources/personal/defaultBg.jpg" mode="widthFix"></image>
			</view>
			<view class="info">
				<!-- 个人信息 -->
				<view class="alignCenter flex">
					<view class="avater">
						<image class="" :src="userInfo.avatar || 'https://image.alhelp.net/uploads/20231104/4d491857ac50d21ebbcb25ff5bc254f8.png'"></image>
					</view>
					<view class="">
						<view class="bold font16 login" v-if="!isLogin" @click.stop="login">立即登录</view>
						<view class="" v-if="isLogin">
							<view class="bold font16 nickName">{{userInfo.nickName || '匿名用户'}}</view>
							<view class="font14">累计打卡{{taskNum}}天</view>
						</view>
					</view>
				</view>
				<uni-icons class="set" type="calendar" size="30" @click="toCalender"></uni-icons>
			</view>
		</view>
		<view class="taskList">
			<view class="flex alignCenter taskTitle justConBetween">
				<view class="bold flex alignCenter font18">打卡任务<image src="@/static/image/icons/star2.png" mode="widthFix"></image></view>
				<view class="font14 colorccc">{{nowTime}}</view>
			</view>
			<template v-for="(item,index) in taskData">
				<view class="taskOne" :key="index">
					<uni-task :taskItem="item" :canEnd="false" :canNote="!item.isCheckIn"></uni-task>
				</view>
			</template>
			<uni-nodata v-if="taskData.length==0"></uni-nodata>
		</view>
	</view>
</template>

<script>
	import { getNowDate } from "@/utils/common.js"
	import { myDayNote,myTaskNoteNum } from "@/api/mine.js"
	import uniTask from "@/pages/mine/components/uni-task/uni-task.vue"
	export default {
		components:{
			uniTask
		},
		data() {
			return {
				nowTime:'',
				isLogin:false,
				page:1,
				pageSize:20,
				pageTotal:0,
				taskData:[],
				userInfo:'',
				taskNum:0
			};
		},
		onLoad() {
			this.userInfo=uni.getStorageSync('userInfo')
			uni.removeStorageSync('taskDate')
			// #ifdef MP
			console.error("小程序胶囊",uni.getMenuButtonBoundingClientRect())
			// #endif
		},
		onShow() {
			this.isLogin=uni.getStorageSync('token')?true:false
			// 选择时间
			this.nowTime=uni.getStorageSync('taskDate')?uni.getStorageSync('taskDate').fulldate:getNowDate()
			this.initPage()
			this.getList()
			this.getTaskNum()
		},
		onUnload() {
			uni.removeStorageSync('taskDate')
		},
		methods:{
			initPage(){
				this.page=1;
				this.taskData=[];
			},
			getList(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				let param={
					page:this.page,
					size:this.pageSize,
					date:this.nowTime,
				}
				myDayNote(param).then((res)=>{
					uni.hideLoading()
					if(res.code==100000){
						this.taskData=this.taskData.concat(res.data.rows)
						this.pageTotal=Math.ceil(res.data.total/this.pageSize)
					}
				}).catch((err)=>{uni.hideLoading()})
				
			},
			// 日历
			toCalender(){
				uni.navigateTo({
					url:'/pages/mine/task/taskCalender/taskCalender'
				})
			},
			// 累计打卡
			getTaskNum(){
				myTaskNoteNum().then((res)=>{
					if(res.code==100000){
						this.taskNum=res.data
					}
				})
			},
			clickLeft(){
				uni.navigateBack()
			}
		},
		onPullDownRefresh() {
			this.initPage()
			this.getList()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		},
		onReachBottom() {
			if(this.page<this.pageTotal){
				++this.page
				this.getList()
			}else{
				uni.showToast({
					title:'我也是有底线的',
					icon:'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/public.scss";
	// 自定义导航栏
	::v-deep .uni-navbar{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
	}
	::v-deep .uni-navbar__content{
		background-color: transparent !important;
		border:none;
	}
	::v-deep .uni-navbar__header{
		background-color: transparent !important;
	}
	.bgBox{
		height:500rpx;
		position: relative;
		.bg{
			width:100%;
			height:100%;
			overflow: hidden;
			image{
				width:100%;
				height:100%;
			}
		}
		.info{
			position: absolute;
			top:0;
			left:0;
			/* #ifdef APP-PLUS */
			padding: 170rpx 50rpx 0;
			/* #endif */
			/* #ifndef APP-PLUS */
			padding: 170rpx 50rpx 0;
			/* #endif */
			width:100%;
			height: 100%;
			box-sizing: border-box;
			background: rgba(255, 255, 255, .5);
			.avater{
				width: 148rpx;
				height: 148rpx;
				border-radius: 50%;
				margin-right: 20rpx;
				box-sizing: border-box;
				flex-shrink: 0;
				image{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.set{
				position:absolute;
				right:50rpx;
				/* #ifdef APP-PLUS */
				top:170rpx;
				/* #endif */
				/* #ifndef APP-PLUS */
				top:170rpx;
				/* #endif */
			}
		}
	}
	.taskList{
		position: relative;
		z-index: 10;
		top:-100rpx;
		background: #fff;
		box-sizing: border-box;
		border-radius: 50rpx 50rpx 0 0;
		// background:$pageBgColor;
		.taskOne{
			border-bottom: 20rpx solid $pageBgColor;
		}
		.taskTitle{
			padding: 50rpx 30rpx 30rpx;
			image{
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
</style>
